<template>
	<view class="">
		<view class="pl-20 pr-20">
			<view class="gift-bag-card" :style="{background: detail.bgColor}">
				<view class="flex flex--row">
					<text>{{detail.name}}</text>
					<view class="fsize-28 mt-10">
						<text>含{{detail.projectCount}}种明细</text>
						<text class="ml-10 mr-10" v-if="type === '2'">·</text>
						<text v-if="type === '2'">剩余{{detail.balance}}次派发</text>
					</view>
				</view>
				<text class="fsize-24">免费</text>
			</view>
		</view>
		<view class="bg-white">
			<u-tabs :current="current" :list="tabs" @click="clickTabs" lineColor="#e54d42" :activeStyle="{color: '#e54d42'}" :scrollable="false" lineWidth="60"/>
		</view>
		<view class="padding-20">
			<view class="bg-white border-radius-10 padding-20" v-if="current===0">
				<view class="flex align-center">
					<uni-icons custom-prefix="iconfont" type="icon-a-37-kapian" size="26" color="#5778e9" />
					<view>{{detail.name}}</view>
				</view>
				<view class="ml-30 mt-20 fsize-24">
					<view class="pt-20 pb-20 border-t line-gray">含{{detail.projectCount}}种项目 · 有效期至领取后{{detail.validDays}}天</view>
					<view class="pt-20 pb-20 border-t line-black" v-for="(pro, proIx) in detail.items" :key="proIx">
						<text>{{pro.projectObj.name}} · {{pro.times}}次</text>
					</view>
				</view>
			</view>
			<!-- <view v-if="current===1">
				<u-list>
					<u-list-item v-for="(item, index) in 2" :key="index">
						<view class="bg-white border-radius-10 padding-20 mb-20">
							<view class="flex justify-between align-center">
								<text class="">管理员派发</text>
								<view class="line-red">
									<text class="fsize-22">+</text>
									<text>1</text>
								</view>
							</view>
							<text class="line-gray mt-20 fsize-24">2023-03-29 14:54:56</text>
						</view>
					</u-list-item>
				</u-list>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				detail:{},
				type: '1',  // '1' 礼包未领取 '2'礼包已领取
				current: 0,
				tabs:[
				 { name: '礼包明细' },
				 // { name: '领取记录' }
			 ],
			}
		},
		onLoad(opt) {
			console.log(opt)
			this.type = opt.type
			this.getData(opt.id)
		},
		methods: {
			clickTabs(e){
				this.current = e.index
			},
			getData(id){
				if(this.type === '1'){
					this.$reqJsonPost('GetGiftPackDetail',{ id: id }).then(res=>{
						this.detail ={
							...res.data.model,
							items: res.data.items
						} 
					})
				}else if(this.type === '2'){
					this.$reqJsonPost('StockHolderGiftBagGetDetails',{ id: id }).then(res=>{
						this.detail ={
							...res.data.model,
							items: res.data.items
						} 
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gift-bag-card{
		min-height: 210rpx;
		padding: 40rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
		background: linear-gradient(to bottom right,#000,#333);
		color:#fff;
	}
</style>